<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
        <p>计算时间: {{ now }}</p>      
    </div>
    <!-- 侦听属性 -->
    <div id="demo">
        <p>这是{{ fullName }}</p>
        <p>这是{{ firstName }}</p>
        <p>这是{{ lastName }}</p>
    </div>
    <div id="watch-example">
        <p>
            请输入一个你要问的问题：
            <input v-model="question">
        </p>
        <p>{{ answer }}</p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#example',
        data: {
            message: 'hello',
        },
        computed: {
            // 计算属性的getter
            reversedMessage: function() {
               return this.message.split('').reverse().join('')
            },
            now: function() {
                return Date.now()
            }
        }
    })
    // 侦听属性
    var vm1 = new Vue({
        el: "#demo",
        data:{
            firstName: 'Foo',
            lastName: 'Bar'
        },
        // watch: {
        //     firstName: function(val){
        //             this.firstName = val+' '+this.lastName
        //     },
        //     lastName:function(val){
        //             this.fullName = this.firstName+ ' ' + val
        //     }
        // },
        computed: {
            fullName: {
                // getter   通过computer计算获取更新后的fullName的值
                get: function(){
                    return this.firstName + ' ' + this.lastName
                },
                // setter 设置当fullName值更新改变时，firstName和lastName值也会进行相应的更新
                set: function (newValue){
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length -1]
                }
            }
        }
    })
    vm1.fullName = 'John Doe'
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data:{
            question:'',
            answer: '我不能够为你解答，直到你要输入需要的问题内容'
        },
        watch: {
            // 如果 `question`发生改变，这个函数就会运行
            question: function (newQuestion, oldQeustion){
                this.answer = 'Waiting for you to stop typing...'
                this.debouncedGetAnswer()
            }
        },
        created: function() {
            this.debouncedGetAnswer = _.debounce(this.getAnswet,500)
        },
        methods: {
            getAnswer: function() {
                if(this.question.indexOf('?') === -1){
                    this.answer = 'Questions usually contain a quesiton mark. ;-)'
                    return
                }
                this.answer = 'Thinking...'
                var vm = this 
                axios.get('https://yesno.wtf/api')
                    .then(function (response){
                        vm.answer = _.capitalize(response.data.answer)
                    })
                    .catch(function (error){
                        vm.answer = 'Error! Could not reach the API' + error
                    })
            }
        }
    })
</script>
</html>